<template>
    <div class="main">
      <el-card class="box-card">
      <div slot="header" class="clearfix">
          <div>
              <svg class="icon ico1" aria-hidden="true">
                  <use xlink:href="#icon-shujujianguan"></use>
              </svg>
              <span>添加</span>
          </div>
      </div>
      <el-form :inline="true" :model="merchantForm" class="demo-form-inline">
          <el-form-item label="商家名称">
              <el-select v-model="merchantForm.name" placeholder="请选择">
                  <el-option
                  v-for="item in merchantName"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
          </el-form-item>
      </el-form>
      <el-button class="addBtn">添加</el-button>
      <!-- 表格 -->
      <el-table
      :data="tableData"
      style="width: 100%"
      border>
          <el-table-column
          label="服务分类">
              <template slot-scope="scope">
                  <el-select v-model="tableData[scope.$index].type" placeholder="请选择">
                      <el-option
                      v-for="item in serveType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                  </el-select>
              </template>
          </el-table-column>
          <el-table-column
          label="服务项目">
              <template slot-scope="scope">
                  <el-input v-model="tableData[scope.$index].project" placeholder="服务项目"></el-input>
              </template>
          </el-table-column>
          <el-table-column
          label="原价（元）">
              <template slot-scope="scope">
                  <el-input v-model="tableData[scope.$index].oldPrice" placeholder="原价"></el-input>
              </template>
          </el-table-column>
          <el-table-column
          label="现价（元）">
              <template slot-scope="scope">
                  <el-input v-model="tableData[scope.$index].newPrice" placeholder="现价"></el-input>
              </template>
          </el-table-column>
          <el-table-column
          label="服务介绍"
          width="400">
              <template slot-scope="scope">
                  <el-input v-model="tableData[scope.$index].describe" placeholder="服务介绍"></el-input>
              </template>
          </el-table-column>
          <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
          </el-table-column>
      </el-table>
  
      <div class="btn">
          <el-button @click="cancel">取消</el-button>
          <el-button @click="Edit" type="primary">保存</el-button>
      </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { serveAdd } from '../../../api/index'
  export default {
      name:'ServePublish',
      data(){
          return{
              merchantForm:{
                  name:''
              },
              merchantName:[
                  {value: 'xxx',label: '请输入商家名称'}
              ],
              serveType:[
                  {value: 'service',label: '车辆维修'},
                  {value: 'maintain',label: '汽车保养'},
                   {value: 'wash',label: '专业洗车'},
                   {value: 'refuel',label: '就近加油'}
              ],
              tableData: [
                  {project:'',type:'',oldPrice:null,newPrice:null,describe:''},
                  {project:'',type:'',oldPrice:null,newPrice:null,describe:''}
              ]
          }
      },
      methods:{
          handleDelete(index, row) {
              console.log(index, row);
          },
          cancel(){
              this.$router.back();
          },
          Edit(){
            serveAdd({
                data:{
                    bussinessId:'111',
                    categoryId:'222',
                    serviceItem:"测试",
                    currentPrice:'199',
                    originPrice:'200'
                }
            }).then(r=>{
                console.log(r);
            });
            this.$router.push('/serveSetting');
          }
      },
      created(){
          this.merchantForm.name = this.merchantName[0].value;
      }
  }
  </script>
  
  <style scoped>
  .main,.box-card{
      height: 100%;
  }
  .ico1{
      color: #68BBC4;
      font-size: 22px;
      margin-right: 10px;
  }
  .demo-form-inline .el-select{
      width: 500px;
  }
  .addBtn{
      width: 80px;
      margin-bottom: 10px;
  }
  .el-table /deep/ .cell{
      text-align: center;
    }
    .btn{
      text-align: center;
      margin-top: 100px;
    }
    .btn .el-button{
      width: 140px;
      margin-right: 20px;
    }
  </style>